<template>
    <div>
        <!-- 新增 -->
        <el-row :gutter="10">
            <el-col :span="8">
                <div class="newAdd">
                    <div class="newAdd_num">8</div>
                    <div class="newAdd_text">新增确诊</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="newAdd">
                    <div class="newAdd_num">1</div>
                    <div class="newAdd_text">本土新增</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="newAdd">
                    <div class="newAdd_num">7</div>
                    <div class="newAdd_text">境外输入</div>
                </div>
            </el-col>
        </el-row>
        
        <!-- 统计 -->
        <el-row :gutter="10">
            <el-col :span="8">
                <div class="count">
                    <div class="count_num">8</div>
                    <div class="count_text">现有确诊</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="count">
                    <div class="count_num">1</div>
                    <div class="count_text">现有重症</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="count">
                    <div class="count_num">7</div>
                    <div class="count_text">累计境外输入</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8">
                <div class="count">
                    <div class="count_num">8</div>
                    <div class="count_text">累计确诊</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="count">
                    <div class="count_num">1</div>
                    <div class="count_text">累计出院</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="count">
                    <div class="count_num">7</div>
                    <div class="count_text">累计死亡</div>
                </div>
            </el-col>
        </el-row>

        <!-- 国内病例 -->
        <div>
            <div style="color:#999999;margin-bottom:.2rem">国内病例</div>
            <el-row class="casees">
                <el-col :span="4">
                    <div style="background-color:#e0e1fc">地区</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:#dd837f">新增确诊</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:#f4d3aa">新增疑似</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:#f7cccb">新增死亡</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:#c5eab4">新增治愈</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:#d2d2d2">境外输入</div>
                </el-col>
            </el-row>
            <el-row class="casees_data" v-for="item in dataList.list" :key="item.id">
                <el-col :span="4">
                    <div>{{item.province}}</div>
                </el-col>
                <el-col :span="4">
                    <div>{{item.confirmed}}</div>
                </el-col>
                <el-col :span="4">
                    <div>{{item.suspected}}</div>
                </el-col>
                <el-col :span="4">
                    <div>{{item.dead}}</div>
                </el-col>
                <el-col :span="4">
                    <div>{{item.cure}}</div>
                </el-col>
                <el-col :span="4">
                    <div>{{item.outside}}</div>
                </el-col>
            </el-row>
            <!-- 分页 -->
            <el-pagination
                style="margin:1em 0"
                layout="total, prev, pager, next"
                @current-change="changeHandler"
                :current-page='params.page'
                :page-size='params.pageSize'
                :total="dataList.total">
            </el-pagination>
        </div>

        <!-- 最新进展 -->
        <div>
            <div style="color:#999999;margin-bottom:.2rem">最新进展</div>
            <div class="latest_progress" v-for="item in news.list" :key="item.id">
                <div class="progress_time"><span></span> {{item.publishTime | dateFormat}}</div>
                <div class="progess_details"> {{item.title}}</div>
            </div>
            <!-- 分页 -->
            <el-pagination
                style="float:right;margin-top:1em"
                layout="total, prev, pager, next"
                @current-change="changeHandler_news"
                :current-page='news_params.page'
                :page-size='news_params.pageSize'
                :total="news.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 5
            },
            news_params: {
                page: 1,
                pageSize: 5
            }
        }
    },
    created() {
        // 分页查询所有疫情信息
        this.queryEpidemic(this.params),
        // 分页查询新闻资讯
        this.queryNews(this.news_params)
    },
    computed: {
        // 映射数据疫情
        ...mapState("data",["dataList"]),
        // 映射数据新闻资讯
        ...mapState("news",["news"])
    },
    methods: {
        // 映射方法分页疫情
        ...mapActions("data",["queryEpidemic"]),
        // 映射方法分页新闻资讯
        ...mapActions("news",["queryNews"]),
        // 疫情数据分页
        changeHandler(page) {
            this.params.page = page
            this.queryEpidemic(this.params)
        },
        // 新闻资讯分页
        changeHandler_news(page) {
            this.news_params.page = page
            this.queryNews(this.news_params)
        }
    }
}
</script>

<style scoped>
    .latest_progress {
        background-color: #f8f8f8;
        padding: 1rem;
    }
    .progess_details {
        background-color: #fff;
        padding: 1rem;
        border-radius: 5px;
        color: #666;
        font-size: 14px;
    }
    .progress_time {
        font-weight: bold;
        margin-bottom: .3rem;
    }
    .progress_time span {
        display: inline-block;
        background-color: #145df6;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .casees .el-col div,.casees_data .el-col div {
        text-align: center;
        padding: 1.3rem;
    }
    .count {
        text-align: center;
        background-color: #fbf5ef;
        padding: 1.8em;
        margin-bottom: 1rem;
    }
    .newAdd {
        text-align: center;
        background-color: #eefafe;
        padding: 1.8em;
        margin-bottom: 1rem;
    }
    .newAdd_num,.count_num {
        color: #ee672c;
    }
</style>